<template>
	<view class="_rotate" :style="[{'--border-color': themeColor}, customStyles]">

	</view>
</template>

<script>
	export default {
		name: "rotate-loading",
		props: {
			customStyles: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				themeColor: this.$ThemeColor
			};
		},
		created() {
			this.themeColor = this.$ThemeColor
		}
	}
</script>

<style lang="scss" scoped>
	._rotate {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 8rpx solid var(--border-color);
		border-bottom-color: transparent !important;
		/*已在style设置border-color,此处需加 !important*/
		vertical-align: middle;
		animation: rotateAnimation 0.6s linear infinite;
	}

	// 旋转加载动画
	@keyframes rotateAnimation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
